<template>
    <!--地图挂载dom-->
    <div id="map">
        <div class="MapTool">
            <el-select v-model="value" placeholder="请选择" @change="drawChange">
                <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                </el-option>
            </el-select>
        </div>
    </div>
</template>

<script>
    //引入依赖
    import {Map, View} from 'ol'
    import {Draw, Modify, Select} from 'ol/interaction';
    import Polygon from 'ol/geom/Polygon';
    import {OSM, Vector as VectorSource} from 'ol/source';
    import {Tile as TileLayer, Vector as VectorLayer} from 'ol/layer';
    import {Circle as CircleStyle, Fill, Icon, Stroke, Style} from 'ol/style';
    import {altKeyOnly} from "ol/events/condition";
    import marker from './data/marker.png'
    import GeoJSON from 'ol/format/GeoJSON';

    export default {
        name: 'ModifyInteraction',
        data() {
            return {
                options: [{
                    value: 'Point',
                    label: '点'
                }, {
                    value: 'LineString',
                    label: '线'
                }, {
                    value: 'Polygon',
                    label: '面'
                }, {
                    value: 'Circle',
                    label: '圆'
                }],
                value: ''
            }
        },
        mounted() {

            let geojson ={
                "type": "FeatureCollection",
                "features": [
                    {
                        "type": "Feature",
                        "properties": {},
                        "geometry": {
                            "type": "Polygon",
                            "coordinates": [
                                [
                                    [
                                        113.18647384643553,
                                        23.056831175393842
                                    ],
                                    [
                                        113.27436447143555,
                                        23.056831175393842
                                    ],
                                    [
                                        113.27436447143555,
                                        23.11589095262163
                                    ],
                                    [
                                        113.18647384643553,
                                        23.11589095262163
                                    ],
                                    [
                                        113.18647384643553,
                                        23.056831175393842
                                    ]
                                ]
                            ]
                        }
                    }
                ]
            }
            const image = new Icon({
                src: marker,
                anchor: [0.75, 0.5],
                rotateWithView: true,
            })

            const styles = {
                'Point': new Style({
                    image: image,
                }),
                'LineString': new Style({
                    stroke: new Stroke({
                        color: 'green',
                        width: 1,
                    }),
                }),
                'MultiLineString': new Style({
                    stroke: new Stroke({
                        color: 'green',
                        width: 1,
                    }),
                }),
                'MultiPoint': new Style({
                    image: image,
                }),
                'MultiPolygon': new Style({
                    stroke: new Stroke({
                        color: 'yellow',
                        width: 1,
                    }),
                    fill: new Fill({
                        color: 'rgba(255, 255, 0, 0.1)',
                    }),
                }),
                'Polygon': new Style({
                    stroke: new Stroke({
                        color: 'blue',
                        lineDash: [4],
                        width: 3,
                    }),
                    fill: new Fill({
                        color: 'rgba(0, 0, 255, 0.1)',
                    }),
                }),
                'GeometryCollection': new Style({
                    stroke: new Stroke({
                        color: 'magenta',
                        width: 2,
                    }),
                    fill: new Fill({
                        color: 'magenta',
                    }),
                    image: new CircleStyle({
                        radius: 10,
                        fill: null,
                        stroke: new Stroke({
                            color: 'magenta',
                        }),
                    }),
                }),
                'Circle': new Style({
                    stroke: new Stroke({
                        color: 'red',
                        width: 2,
                    }),
                    fill: new Fill({
                        color: 'rgba(255,0,0,0.2)',
                    }),
                }),
            };

            const styleFunction = function (feature) {
                return styles[feature.getGeometry().getType()];
            };
            //绘制的矢量数据
            this.source = new VectorSource({wrapX: false});
            const vector = new VectorLayer({
                source: this.source,
                style: styleFunction,
            });

            //外部加载的矢量数据
            let geoJSON = new GeoJSON();
            let featrue = geoJSON.readFeatures(geojson);
            const vectorSource = new VectorSource();
            vectorSource.addFeatures(featrue);


            const vectorLayer = new VectorLayer({
                //矢量数据源
                source: vectorSource,
                //样式设置
                style: styleFunction
            });
            //初始化地图
            this.map = new Map({
                target: 'map',//指定挂载dom，注意必须是id
                layers: [
                    new TileLayer({
                        source: new OSM()//加载OpenStreetMap
                    }),
                    vector,
                    vectorLayer
                ],
                //配置视图
                view: new View({
                    center: [113.24981689453125, 23.126468438108688], //视图中心位置
                    projection: "EPSG:4326", //指定投影
                    zoom: 12   //缩放到的级别
                })
            });

            //选中矢量图形
            const select = new Select();
            this.map.addInteraction(select);
            //修改交互
            const modify = new Modify({
                source: this.source,//绘制的数据源
                //features:select.getFeatures(),//选中的要素
                condition: altKeyOnly,// 选中可以被修改的条件事件类型
                style:  new Style({
                    stroke: new Stroke({
                        color: 'rgba(255,0,0, 0.2)',
                        lineDash: [6],
                        width: 5
                    }),
                    fill: new Fill({
                        color: 'rgba(0,255,0,0.2)',
                    }),
                })
            });
            this.map.addInteraction(modify);

        },
        methods: {
            drawChange(type) {
                if (this.map) {
                    this.map.removeInteraction(this.draw);
                    this.addDraw(type)
                }
            },
            addDraw(type) {
                if (type !== 'None') {
                    this.draw = new Draw({
                        source: this.source,
                        type: type,
                    });
                    this.map.addInteraction(this.draw);
                }
            },
            styleFunction(feature, res) {
                let name = feature.getProperties().features[0].get("name");
                debugger
                switch (name) {
                    case"广州市":
                        return
                        new Style({
                            stroke: new Stroke({
                                color: 'rgba(255,92,92, 0.2)',
                                lineDash: [3],
                                width: 10
                            }),
                            fill: new Fill({
                                color: 'rgba(255,0,0,0.2)',
                            }),
                        })
                        break;
                    case"佛山市":
                        return
                        new Style({
                            stroke: new Stroke({
                                color: 'rgba(92,255,92, 0.2)',
                                lineDash: [3],
                                width: 10
                            }),
                            fill: new Fill({
                                color: 'rgba(255,0,0,0.2)',
                            }),
                        })
                        break;
                }
            },
        }
    }
</script>

<style scoped>
    #map {
        width: 100%;
        height: 100%;
    }

    .MapTool {
        position: absolute;
        top: .5em;
        right: .5em;
        z-index: 9999;
    }
</style>